<style>
    .amap-marker-label{
        border: 0;
        background-color: white;
    }
    .amap-marker-info{
        margin-top: 10px;
        margin-bottom: 10px;
        margin-right: 20px;
        margin-left: 20px;
    }


</style>
<div id="{{ __SELF__.alias }}_amap" style="width: {{ __SELF__.width }};height: {{ __SELF__.height }}">
</div>

<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode:'{{ __SELF__.amap_jscode }}',
    }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key={{ __SELF__.amap_key }}&plugin=AMap.Geocoder"></script>
<script type="text/javascript">
    var lng={{ __SELF__.company_longitude }};
    var lat={{ __SELF__.company_latitude }};
    var map = new AMap.Map("{{ __SELF__.alias }}_amap", {
        zoomEnable: {{ __SELF__.zoomEnable }}, //地图是否可缩放，默认值为true
    zoom:{{ __SELF__.zoom }}, //初始化地图层级
    center: [lng, lat] //初始化地图中心点
    });
    var marker = new AMap.Marker();
    // 实例化点标记
    addMarker();
    function addMarker() {
        var lnglat  = [lng, lat];
        map.add(marker);
        marker.setPosition(lnglat);
    }
    // 设置label标签
    // label默认蓝框白底左上角显示，样式className为：amap-marker-label
    marker.setLabel({
        offset: new AMap.Pixel(0, -10),  //设置文本标注偏移量
        content: "<div class='amap-marker-info'><strong>{{ __SELF__.company_title }}</strong></div>", //设置文本标注内容
        direction: 'top' //设置文本标注方位
    });
    // 同时引入工具条插件，比例尺插件和鹰眼插件
    AMap.plugin([
        'AMap.ToolBar',
    ], function(){
        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
        map.addControl(new AMap.ToolBar());
    });
</script>

